<script setup>
import { ref, onMounted, shallowRef } from 'vue'
import axios from 'axios'
import NewsArticle from '@/views/ming/newsArticle.vue'

const types = ref([])
const activeComponent = shallowRef(null)
const activeTypeId = ref(null)

// 获取新闻类型
const getAllNewsTypes = () => {
  axios.get("/newsType/getAllNewsTypes").then(resp => {
    types.value = resp.data
    // 默认加载第一个类型
    if (types.value.length > 0) {
      handleTypeClick(types.value[0])
    }
  })
}

// 处理类型点击
const handleTypeClick = (type) => {
  activeTypeId.value = type.id
  activeComponent.value = NewsArticle
}

onMounted(() => {
  getAllNewsTypes()
})
</script>

<template>
  <h1>资讯管理</h1>
  <div class="container">
    <el-menu
        :default-active="`/getNewsType?id=${activeTypeId}`"
        mode="horizontal"
        background-color="#f5f7fa"
        text-color="#333"
        active-text-color="#409EFF"
        class="menu-bar"
    >
      <el-menu-item
          v-for="t in types"
          :key="t.id"
          :index="`/getNewsType?id=${t.id}`"
          @click="handleTypeClick(t)"
      >
        {{ t.name }}
      </el-menu-item>
    </el-menu>
  </div>

  <!-- 动态组件容器 -->
  <div class="component-container">
    <component
        :is="activeComponent"
        v-if="activeComponent"
        :key="activeTypeId"
    :typeId="activeTypeId"
    />
  </div>
</template>

<style scoped>
.container {
  font-family: "Microsoft YaHei", sans-serif;
}

.menu-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: none;
  font-size: 16px;
  padding: 0;
}

.menu-bar .el-menu-item {
  padding: 0 20px;
  font-weight: bold;
  margin: 0;
  cursor: pointer;
}

.menu-bar .el-menu-item:hover {
  background-color: #eef1f6;
}

.menu-bar .el-menu-item.is-active {
  color: #409EFF !important;
}

.component-container {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
}
</style>